<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购订单申请</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .el-form-item__label{
            width: 150px;
            text-align: right;
            float: left;
        }
        .el-row {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 578px; border: 1px solid #eee">
            <el-form :inline="true" :model="form" ref="form" class="demo-form-inline" style="margin-top: 35px;">
                <el-row>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="productName"
                                label="产品名称："
                                :rules="[{ required: true, message: '产品名称不能为空'}]">
                            <el-input v-model="form.productName" placeholder="格力空调"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="productNumber"
                                label="产品编号："
                                :rules="[{ required: true, message: '产品编号不能为空'}]">
                            <el-input v-model="form.productNumber" placeholder="555"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                label="产品颜色：">
                            <el-input v-model="form.productColor" placeholder="白色"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="demandQuantity"
                                label="需求数量（/件）："
                                :rules="[
                                    { required: true, message: '需求数量不能为空'},
                                    { type: 'number', message: '需求数量必须为数字值'}]">
                            <el-input v-model.number="form.demandQuantity" placeholder="2000"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="paymentMethod"
                                label="支付方式："
                                :rules="[{ required: true, message: '申请人不能为空', trigger:'change'}]">
                            <el-select v-model="form.paymentMethod" placeholder="请选择">
                                <el-option label="线下支付" value="线下支付"></el-option>
                                <el-option label="线上支付" value="线上支付"></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="applicantId"
                                label="申请人："
                                :rules="[{ required: true, message: '申请人不能为空', trigger:'change'}]">
                            <el-select v-model="form.applicantId" placeholder="请选择">
                                <el-option v-for="(applicant,index) in applicants" :key="index" :label="applicant.name" :value="applicant.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="director"
                                label="负责人："
                                :rules="[{ required: true, message: '负责人不能为空', trigger:'change'}]">
                            <el-select v-model="form.director" placeholder="请选择">
                                <el-option v-for="(dept,index) in departments" :key="index" :label="dept.manager" :value="dept.manager"></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="demandDepartmentId"
                                label="需求部门："
                                :rules="[{ required: true, message: '需求部门不能为空'}]">
                            <el-select v-model="form.demandDepartmentId" placeholder="请选择">
                                <el-option v-for="(dept,index) in departments" :key="index" :label="dept.name" :value="dept.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="demandTime"
                                label="需求时间："
                                :rules="[{ required: true, message: '需求时间不能为空'}]">
                            <el-date-picker
                                    v-model="form.demandTime"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                prop="estimatedCost"
                                label="预计花费（/元）："
                                :rules="[{ required: true, message: '预计花费不能为空'}]">
                            <el-input v-model="form.estimatedCost" placeholder="2000"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <el-form-item
                                label="申请类型："
                                prop="applicationType"
                                :rules="[{ required: true, message: '负责人不能为空', trigger:'change'}]">
                            <el-select v-model="form.applicationType" placeholder="请选择">
                                <el-option label="线上" value="线上"></el-option>
                                <el-option label="线下" value="线下"></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-row>
                    <el-form-item label="说明：">
                        <el-input
                                type="textarea"
                                :rows="7"
                                placeholder="因货源不足 急需要货源"
                                v-model="form.description"
                                maxlength="200"
                                show-word-limit
                                style="width: 1000px;">
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row style="margin-left: 100px;">
                    <el-form-item size="large">
                        <el-button type="primary" @click="application('form')" :loading="loading">立即申请</el-button>
                        <el-button @click="cancelApplication">取消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-container>
    </div>
</body>
<script>
    var Main = {
        data() {
            return {
                loading: false,
                departments:[], //部门信息
                applicants:[],   //申请人信息
                form: {
                    productName:'',   //产品名称
                    demandQuantity:0,  //需求数量
                    paymentMethod:'',   //支付方式
                    applicantId:'',   //申请人
                    director:'',  //负责人
                    demandDepartmentId:'',  //需求部门
                    demandTime:'',   //需求时间
                    estimatedCost:'',   //预计花费
                    applicationType:'', //申请类型
                    description:'',  //说明
                    productNumber:'',   //产品编号
                    productColor:'',    //产品颜色
                },
                pickerOptions: {
                    // disabledDate(time) {
                    //     return time.getTime() > Date.now();
                    // },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods: {
            //获取部门和负责人信息
            getDepartment(){
                axios.get("/purchasing/departments").then(value => {
                    this.departments = value.data.data;
                })
            },
            //获取员工信息
            getStaff(){
                axios.get("/purchasing/staffs").then(value => {
                    this.applicants = value.data.data;
                });
            },
            //获得商品信息
            getProduct(id){
                axios.get("/purchasing/product/"+id).then(value => {
                    if (value.data.state==1){
                        let data = value.data.data;
                        this.form.productName = data.pname;
                        this.form.productNumber = data.pnumber;
                        this.form.estimatedCost = this.form.demandQuantity*data.pprice;
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //立即申请
            application(formName) {
                this.loading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("/purchasing/purchase_order",this.form).then(value => {
                            if (value.data.state==1){
                                this.loading = false;
                                //消息提醒
                                this.sendMessage("申请成功","success");
                                //延迟跳转
                                setTimeout("window.location=\"/audit_list.html\";",1500);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //取消
            cancelApplication(){
                window.location = "/audit_list.html";
            },
            //提示信息
            sendMessage(msg,type){
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            }
        },
        mounted(){

            //加载部门和负责人信息
            this.getDepartment();
            //加载用户信息
            this.getStaff();
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>